{% set providerChosen = (data.target == 'aws') ? true : false %}

{% set machines = (data.vm.provider.aws.machines is defined and data.vm.provider.aws.machines)
    ? data.vm.provider.aws.machines : [] %}
{% set syncedFolders = (data.vm.synced_folder is defined and data.vm.synced_folder)
    ? data.vm.synced_folder : [] %}

<div class="container-fluid cm-container-white section-title">
    <div class="checkbox checkbox-lg no-padding">
        <input type="radio" id="vagrantfile-vm-provider-aws-install"
               name="vagrantfile[target]" value="aws"
               {% if providerChosen %}checked{% endif %}
               data-toggle="radio-collapse" data-target="#vagrantfile-aws-container"
               data-enforce-group-single="vagrantfile"
               data-enable-on-check data-disable-on-uncheck />
        <label for="vagrantfile-vm-provider-aws-install">Deploy to Amazon</label>

        <p>
            A new server will be spun up at Amazon.
            <a href="#" data-toggle="modal"
               data-target="#vagrantfile-aws-modal">Click here for instructions</a>.
        </p>
    </div>
</div>

<div id="vagrantfile-aws-container"
     class="container-fluid collapse {% if providerChosen %}in{% endif %}">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-vm-provider-aws-access_key_id">
                    EC2 Access Key ID
                </label>
                <input type="text" id="vagrantfile-vm-provider-aws-access_key_id"
                       name="vagrantfile[vm][provider][aws][access_key_id]"
                       placeholder="EC2 ACCESS KEY ID" class="form-control"
                       value="{{ data.vm.provider.aws.access_key_id }}" />
                <div class="help-block">
                    <a href="https://console.aws.amazon.com/iam/home?#security_credential" target="_blank">Get it here</a>.
                    You can leave this blank and fill it in manually in your <code>config.yaml</code> if you want.
                </div>
            </div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-vm-provider-aws-secret_access_key">
                    EC2 Secret Access Key
                </label>
                <input type="text" id="vagrantfile-vm-provider-aws-secret_access_key"
                       name="vagrantfile[vm][provider][aws][secret_access_key]"
                       placeholder="EC2 SECRET ACCESS KEY" class="form-control"
                       value="{{ data.vm.provider.aws.secret_access_key }}" />
                <div class="help-block">
                    <a href="https://portal.aws.amazon.com/gp/aws/securityCredentials?" target="_blank">Get it here</a>.
                    You can leave this blank and fill it in manually in your <code>config.yaml</code> if you want.
                </div>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-primary">
        <div class="panel-heading">Machines</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.vagrantfile_aws.machine') }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, machine in machines %}
                    {% set blockId = "vagrantfile-vm-provider-aws-machines-#{index}" %}
                    {% set blockName = "vagrantfile[vm][provider][aws][machines][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add an AWS machine
                </div>
                {% for index, machine in machines %}
                    {% include 'PuphpetBundle:vagrantfile-aws:machine.html.twig' with {
                        'machine': machine,
                        'instance_types': data.available.instance_types,
                        'regions': data.available.regions,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-primary">
        <div class="panel-heading">Shared Folders</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.vagrantfile_aws.synced_folder') }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, synced_folder in data.vm.synced_folder %}
                    {% set blockId = "vagrantfile-vm-provider-aws-synced_folder-#{index}" %}
                    {% set blockName = "vagrantfile[vm][provider][aws][synced_folder][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a shared folder
                </div>
                {% for index, synced_folder in data.vm.synced_folder %}
                    {% include 'PuphpetBundle:vagrantfile-aws:synced-folder.html.twig' with {
                        'synced_folder': synced_folder,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="vagrantfile-aws-modal" tabindex="-1" role="dialog"
     aria-labelledby="vagrantfile-aws-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="vagrantfile-aws-modal-label">
                    Instructions for Amazon Deployment
                </h4>
            </div>
            <div class="modal-body">
                <h3>AWS EC2 Instance</h3>

                <p>
                    Use Amazon's famously reliable servers for your app!
                </p>

                <h3>Installation Requirements</h3>

                <p>Run the following commands from your host's terminal (not within the VM):</p>

                <ul class="nav nav-pills">
                    <li class="active"><a href="#aws-instructions-mac" data-toggle="pill">Mac</a></li>
                    <li><a href="#aws-instructions-windows" data-toggle="pill">Windows</a></li>
                    <li><a href="#aws-instructions-linux" data-toggle="pill">Linux</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="aws-instructions-mac">
                        <code class="col-xs-11 inline-instructions">
                            $ vagrant plugin install vagrant-aws<br />
                            $ vagrant box add dummy https://github.com/mitchellh/vagrant-aws/raw/master/dummy.box
                        </code>
                    </div>
                    <div class="tab-pane" id="aws-instructions-windows">
                        <code class="col-xs-11 inline-instructions">
                            $ vagrant plugin install vagrant-aws<br />
                            $ vagrant box add dummy https://github.com/mitchellh/vagrant-aws/raw/master/dummy.box
                        </code>

                        <div class="clearfix"></div>

                        <p>
                            You need rsync installed. Easiest way is to use Cygwin and install it through there.
                            Alternatively, you can
                            <a href="https://www.itefix.no/i2/content/cwrsync-free-edition" target="_blank">install rsync separately</a>
                            and add it to your PATH.
                        </p>
                    </div>
                    <div class="tab-pane" id="aws-instructions-linux">
                        <code class="col-xs-11 inline-instructions">
                            $ vagrant plugin install vagrant-aws<br />
                            $ vagrant box add dummy https://github.com/mitchellh/vagrant-aws/raw/master/dummy.box
                        </code>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
